<template>
    <v-chart
        ref="vchartRef"
        :style="{ height: `${props.height}px`, width: `${props.width}px` }"
        :option="option"
    />
</template>
<script setup lang="ts">
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from "echarts/components";
import VChart from "vue-echarts";
import { reactive, ref, watch } from "vue";

use([
    CanvasRenderer,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);
const props = defineProps({
    title:{
        type:String,
        default:""
    },
    xAxisData: {
        type: Array,
        default: []
    },
    seriesData: {
        type: Array,
        default: []
    },
    smooth: {
        type: Boolean,
        default: false
    },
    areaStyle: {
        type: Object,
        default: null
    },
    height: {
        type: Number,
        default: 400
    },
    width: {
        type: Number,
        default: 400
    }
});
const vchartRef = ref<InstanceType<typeof VChart>>();
const option = reactive({
    title: {
        text: props.title
    },
    xAxis: {
        type: 'category',
        data: props.xAxisData
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: props.seriesData,
            type: 'line',
            smooth: props.smooth,
            areaStyle: props.areaStyle
        }
    ]
});
watch(props, () => {
    option.title.text=props.title;
    option.xAxis.data = props.xAxisData;
    option.series[0].data = props.seriesData;
    option.series[0].smooth = props.smooth;
    option.series[0].areaStyle = props.areaStyle;
    vchartRef.value?.resize();
});
</script>